<template>
  <div class="main" v-if="isReload">
    <a-form-model :model="form" ref="loginForm" :rules="rules">
      <!-- <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >-->
      <!-- <a-tab-pane key="tab1" tab="密码登录"> -->
      <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误" />
      <a-form-model-item prop="phone">
        <a-input v-model="form.phone" placeholder="请输入手机号" size="large">
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
      <!-- <a-form-item>
        <a-input
          size="large"
          type="text"
          placeholder="账户:18081062855"
          v-decorator="[
                'phone',
                {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, ], validateTrigger: 'change'}
              ]"
        >
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-item>-->

      <a-form-model-item prop="password">
        <a-input size="large" type="password" autocomplete="false" placeholder="请输入密码" v-model="form.password">
          <!-- v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
          ]"-->
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
      <!-- </a-tab-pane> -->
      <!-- <a-tab-pane key="tab2" tab="手机号登录">
          <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="手机号"
              v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]"
            >
              <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
      </a-form-item>-->

      <!-- <a-row :gutter="16">
            <a-col class="gutter-row" :span="16">
              <a-form-item>
                <a-input
                  size="large"
                  type="text"
                  placeholder="验证码"
                  v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]"
                >
                  <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                </a-input>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-button
                class="getCaptcha"
                tabindex="-1"
                :disabled="state.smsSendBtn"
                @click.stop.prevent="getCaptcha"
                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
              ></a-button>
            </a-col>
      </a-row>-->
      <!-- </a-tab-pane> -->
      <!-- </a-tabs> -->

      <a-form-item>
        <!-- <router-link class="register" :to="{ name: 'register' }">注册账户</router-link> -->
        <!-- <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox> -->
        <a-checkbox v-model="remember">
          记住账号
        </a-checkbox>
        <a @click="$router.push({ name: 'recover' })" class="forge-password" style="float: right;">忘记密码</a>
      </a-form-item>

      <a-form-model-item>
        <a-button style="width:100%;" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
          @click="handleSubmit('loginForm')" size="large">确定</a-button>
      </a-form-model-item>

      <!-- <div class="user-login-other"> -->
      <!-- <span>其他登录方式</span>
        <a>
          <a-icon class="item-icon" type="alipay-circle"></a-icon>
        </a>
        <a>
          <a-icon class="item-icon" type="taobao-circle"></a-icon>
        </a>
        <a>
          <a-icon class="item-icon" type="weibo-circle"></a-icon>
      </a>-->
      <!-- </div> -->
    </a-form-model>

    <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
      @cancel="stepCaptchaCancel"></two-step-captcha>
  </div>
</template>

<script>
import md5 from 'md5'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { loginFunc } from '@/api/login'
import Cookie from 'js-cookie'
import store from '@/store'
export default {
  components: {
    TwoStepCaptcha,
  },
  data() {
    return {
      isReload: false,
      customActiveKey: 'tab1',
      loginBtn: false,
      loginType: 0,
      isLoginError: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      remember: false,
      form: {
        password: null,
        phone: null,
      },
      rules: {
        phone: [
          { required: true, message: '请输入账号/手机号/用户名', trigger: 'blur' },
          { min: 6, max: 16, message: '长度为6-16位', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  created() {
    let state = window.localStorage.getItem('loginState')
    if (state) {
      this.form.phone = window.localStorage.getItem('admin')
      this.remember = true
    }
    window.sessionStorage.clear()
    if (this.$store.getters.addRouters.length > 0) {
      // 判断是否已经刷新
      return window.location.reload()
    }
    this.isReload = true
  },
  methods: {
    ...mapActions(['Login', 'GetInfo', 'Logout']),
    // handler
    handleUsernameOrEmail(rule, value, callback) {
      const { state } = this
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        state.loginType = 0
      } else {
        state.loginType = 1
      }
      callback()
    },
    handleTabClick(key) {
      this.customActiveKey = key
    },
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.Login(this.form)
            .then((res) => {
              this.GetInfo()
                .then(() => {
                  if (this.remember) {
                    window.localStorage.setItem('admin', this.form.phone)
                    window.localStorage.setItem('loginState', this.remember)
                  } else {
                    window.localStorage.clear()
                  }
                  this.loginSuccess()
                })
                .catch((err) => {
                  this.$message.error(err.data.message || '登录失败')
                  this.Logout({}).then(() => {
                    store.dispatch('Logout')
                  })
                })
            })
            .catch((er) => {
              this.$message.error(er.data.message)
            })
        } else {
          return false
        }
      })
    },

    // getCaptcha (e) {
    //   e.preventDefault()
    //   const { form: { validateFields }, state } = this
    //   validateFields(['mobile'], { force: true }, (err, values) => {
    //     if (!err) {
    //       state.smsSendBtn = true
    //       const interval = window.setInterval(() => {
    //         if (state.time-- <= 0) {
    //           state.time = 60
    //           state.smsSendBtn = false
    //           window.clearInterval(interval)
    //         }
    //       }, 1000)
    //       const hide = this.$message.loading('验证码发送中..', 0)
    //       getSmsCaptcha({ mobile: values.mobile }).then(res => {
    //         setTimeout(hide, 2500)
    //         this.$notification['success']({
    //           message: '提示',
    //           description: '验证码获取成功，您的验证码为：' + res.result.captcha,
    //           duration: 8
    //         })
    //       }).catch(err => {
    //         setTimeout(hide, 1)
    //         clearInterval(interval)
    //         state.time = 60
    //         state.smsSendBtn = false
    //         this.requestFailed(err)
    //       })
    //     }
    //   })
    // },
    stepCaptchaSuccess() {
      this.loginSuccess()
    },
    stepCaptchaCancel() {
      // this.Logout().then(() => {
      //   this.loginBtn = false
      //   this.stepCaptchaVisible = false
      // })
    },
    loginSuccess(res) {
      this.$router.push({
        name: 'loading',
        query: { id: this.$store.state.user.school, name: this.$store.state.user.school_name, type: 1 },
      })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        })
      }, 1000)
      this.isLoginError = false
    },
    requestFailed(err) {
      this.isLoginError = true
    },
  },
}
</script>

<style lang="less" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
}
</style>
